<style>
    .ly-data-group{
        margin: 0 20px;
    }

    .ly-data-group-item {
        position: relative;
        display: inline-block;
        padding: 30px;
        border: 1px dashed #C0CCDA;
        width: 100%;
        margin-bottom: 20px;
    }

    .ly-data-group-item:hover .ly-data-group-del-btn {
        display: block;
    }


    .ly-data-group-del-btn {
        cursor: pointer;
        display: none;
        position: absolute;
        top: -10px;
        color: #99A9BF;
        right: -10px;
        font-size: 23px;
        width: 20px;
        background: #fff;
        height: 20px;
        background-size: 20px 20px;
    }

    .ly-data-group-add-box {
        cursor: pointer;
        padding: 12px 0;
        margin-bottom: 20px;
        border: 1px dashed #C0CCDA;
        text-align: center;
    }
    .ly-data-group-item-move{
        width: 100%;
        top: -21px;
        cursor: pointer;
        color: #96a1a7;
        left: 0;
        position: absolute;
        text-align: center;
        height: 20px;
        line-height: 20px;
        font-size: 12px;
        background: #fff;
    }
    .ly-data-group-add-box-des{
        color: #9DA9B6;
        font-size: 13px;
        line-height: 20px;
        display: block;
    }
</style>
<template>
    <div class="ly-data-group" >
        <div class="ly-data-group-item" :key="index"  v-for="(item,index) in value">
            <slot v-bind:item="item" v-bind:index="index" ></slot>
            <div v-if="!hideMove&&index>0" class="ly-data-group-item-move" @click="move(index,index-1)">
                <i class="el-icon-sort" style="font-size: 14px"></i><span style="font-size: 12px;">移动</span>
            </div>
            <div v-if="value.length>min" class="ly-data-group-del-btn el-icon-circle-close" @click="value.splice(index, 1)"></div>
        </div>

        <div v-if="value.length<max" class="ly-data-group-add-box" @click="add">
            <slot name="add">
                <p class="ly-data-group-add-text">{{addText}}</p>
                <p class="ly-data-group-add-box-des">{{addDes}}</p>
            </slot>
        </div>
    </div>
</template>
<script>
    Rap.define('', '', function () {
        return {
            name: 'ly-data-group',
            props: {
                'value': {
                    'default': []
                }, min: {
                    'default': 1
                }, max: {
                    'default': 100
                },
                'maxMessage': {
                    'default': ''
                },
                addText: {
                    'default': ' + 添加一组'
                },
                addDes: {
                    'default': ''
                },
                width:{

                },
                addMethod:{
                    'type':Function,
                    'default':function () {
                        return {};
                    }
                },
                hideMove:Boolean
            }, watch: {
                value: function (value) {
                    if (value.length < this.min) {
                        for (var i = 0; i < this.min - value.length; i++) {
                            this.add();
                        }
                    }
                }
            }, data: function () {
                return {

                };
            }, created: function () {
                if (!this.value) {
                    this.$emit('input', []);
                } else {
                    if (this.value.length < this.min) {
                        for (var i = 0; i < this.min - this.value.length; i++) {
                            this.add();
                        }
                    }
                }
            }, destroyed: function () {

            }, methods: {
                add: function () {
                    if (this.value.length < this.max) {
                        var value={};
                        if(this.addMethod){
                            value= this.addMethod();
                        }
                        if(value){
                            this.value.push(value);
                        }
                    } else {
                        if (!this.maxMessage) {
                            this.$message({type: 'warning', message: '最多添加' + this.max + '组数据'});
                        } else {
                            this.$message({type: 'warning', message: this.maxMessage});
                        }

                    }
                }, move: function (from, to) {
                    if (to < 0 || to > this.value.length) {
                        return;
                    }
                    var temp = this.value[to];
                    Vue.set(this.value, to, this.value[from]);
                    Vue.set(this.value, from, temp);
                }, remove: function (index) {
                    if (this.value.length > this.min) {
                        this.value.splice(index, 1);
                    }
                }, addColumn: function (column) {
                    this.columns.push(column)
                }
            }
        }
    });
</script>


